<template>
	<view class="content">
		<view class="card">
			<step value="2"></step>
		</view>
		<template v-if="add">
			<view class="card">
				<cell title='房产所在地' mode="region" v-model="formData.fcregion" required></cell>
				<cell title='楼盘名称' v-model="formData.xqname" required></cell>
				<cell title='楼栋' mode="number" v-model="formData.dong" required></cell>
				<cell title='单元' mode="number" v-model="formData.unit" required></cell>
				<cell title='楼层房号' mode="number" v-model="formData.room" required></cell>
				<cell title='房产类型' mode="selector" v-model="formData.fctype" :selectorItem="selectorItem" required>
				</cell>
				<cell title='总楼层' mode="number" v-model="formData.totalfloor" required></cell>
				<cell title='所在楼层' mode="number" v-model="formData.floor" required></cell>
				<cell title='面积(m³)' mode="number" v-model="formData.roommj" required></cell>
			</view>
			<view class="text-tip">
				<view class="text-tip-title">温馨提示</view>
				<view class="">1.最多可添加3套房产。</view>
				<view class="">2.目前仅支持普通住宅和别墅的评估。</view>
			</view>
			<button class="btn" size="default" type="primary" @click="addFn()" hover-class="is-hover">评估</button>
		</template>
		<template v-else>
			<view class="card">
				<cell title='企业名称' v-if="this.currentProject !== 'personal'" v-model="formData2.qiyename" required>
				</cell>
				<view style="font-size: 24rpx;padding: 20rpx 0 0 20rpx;">房产评估</view>
				<view v-for="(item,index) in formData2.fcList" :key="index">
					<view class="fcList-item">
						<view class="fcList-item-left">
							<view>
								{{item.name}}
							</view>
							<view class="sub">
								房产价值已评估
							</view>
						</view>
						<view @click="remove(index)" class="fcList-item-right">
							<image class="img" style="width: 100%; height: 100%;" src="./delete.png"></image>
						</view>
					</view>
				</view>
				<view v-if="formData2.fcList.length<3" class="addbtn">
					<text @click="toAdd()"><b>+</b>添加其他房产</text>
				</view>
			</view>
			<view class="text-tip">
				<view class="text-tip-title">温馨提示</view>
				<view class="">1.拟评估的房产可为借款企业或个人名下住房。</view>
			</view>
			<button class="btn" size="default" type="primary" @click="submit()" hover-class="is-hover">评估</button>
		</template>
	</view>
</template>

<script>
	import step from "@/components/step.vue"
	export default {
		components: {
			step
		},
		data() {
			return {
				add: true,
				fcList: [],
				readme: [],
				selectorItem: [{
						value: '1',
						label: '普通住宅'
					},
					{
						value: '3',
						label: '别墅'
					},
				],
				formData: {
					fcregion: '',
					xqname: '河源小区',
					dong: '1',
					unit: '1',
					totalfloor: '12',
					floor: '2',
					fctype: '1',
					room: '1',
					roommj: '110'
				},
				formData2: {
					qiyename: '',
					fcList: []
				},
				currentProject: ''
			}
		},
		onLoad() {

			this.currentProject = uni.getStorageSync('currentProject') || ''
		},
		onNavigationBarButtonTap(event) {
			// cancelText	String	否	取消按钮的文字，默认为"取消"	
			// cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
			// confirmText	String	否	确定按钮的文字，默认为"确定"	
			// confirmColor
			uni.showModal({
				content: '填写房产信息有助于您获取更高的授信额度，您确认不添加房产信息吗？',
				cancelText: '不添加', //	String	否	取消按钮的文字，默认为"取消"
				cancelColor: '#333', //	HexColor	否	取消按钮的文字颜色，默认为"#000000"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
				confirmText: '取消', //	String	否	确定按钮的文字，默认为"确定"	
				confirmColor: '#5da3d2', //
				success: function(res) {
					if (res.confirm) {

					} else if (res.cancel) {
						uni.setStorageSync('fcInfoInput', '不录入');
						uni.navigateBack({
							delta: this.go * 1
						})
					}
				}
			});

		},

		methods: {
			toast(title) {
				uni.showToast({
					icon: "none",
					title,
				})
			},
			submit() {
				if (!this.formData2.qiyename && this.currentProject !== 'personal') {
					this.toast('请输入企业名称')
					return
				}
				if (!this.formData2.fcList.length === 0) {
					this.toast('请添加房产信息')
					return
				}
				uni.setStorageSync('fcInfoInput', '已录入');
				uni.navigateBack({
					delta: this.go * 1
				})
			},

			toAdd() {
				this.formData = {
						fcregion: '',
						xqname: '',
						dong: '',
						unit: '',
						totalfloor: '',
						floor: '',
						fctype: '',
						room: '',
						roommj: ''
					},
					this.add = true
			},
			async remove(i) {
				await this.$myloading() // async
				this.formData2.fcList.splice(i, 1)
			},
			async addFn() {
				if (!this.formData.fcregion) {
					this.toast('请选择房产所在地')
					return
				}
				if (!this.formData.xqname) {
					this.toast('请输入楼盘名称')
					return
				}
				if (!this.formData.dong) {
					this.toast('请输入楼栋号')
					return
				}
				if (!this.formData.unit) {
					this.toast('请输入单元号')
					return
				}
				if (!this.formData.room) {
					this.toast('请输入楼层房号')
					return
				}
				if (!this.formData.fctype) {
					this.toast('请选择房产类型')
					return
				}
				if (!this.formData.totalfloor) {
					this.toast('请输入总楼层')
					return
				}
				if (!this.formData.floor) {
					this.toast('请输入所在楼层')
					return
				}
				if (!this.formData.roommj) {
					this.toast('请输入面积')
					return
				}

				await this.$myloading() // async

				const formData = this.formData
				this.formData2.fcList.push({
					name: formData.xqname + formData.dong + '栋' + formData.unit + '单元' + formData.floor + '楼' +
						formData.room + '号'
				})

				this.add = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 60rpx;
		width: calc(100% - 60rpx);
	}

	.fcList-item {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		position: relative;
		overflow: hidden;

		&-left {
			width: calc(100% - 40rpx);

			.sub {
				color: gray;
				font-size: 20rpx;
			}
		}

		&-right {
			width: 40rpx;
			height: 40rpx;
		}

		&:before {
			content: '';
			display: block;
			height: 2rpx;
			position: absolute;
			bottom: 0;
			right: -100rpx;
			left: 0;
			background-color: rgb(244, 244, 245);
		}
	}

	.addbtn {
		padding: 20rpx 0 10rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgb(5, 75, 165)
	}
</style>